<template>
  <div class="title yellow_title">联系方式</div>
  <div class="ful">
    <div class="left">联系人</div>
    <input
      v-model="userName"
      type="text"
      class="right right_input"
      placeholder="请输入联系人姓名"
      @input="changeName"
    />
  </div>
  <div class="ful">
    <div class="left">电话号码</div>
    <input
      v-model="userPhone"
      type="tel" 
      pattern="[0-9]*"
      class="right right_input"
      placeholder="请输入联系人手机号"
      @input="changePhone"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  contactName: {
    type: String,
    default: "",
  },
  phone: {
    type: [Number, String],
    default: ""
  },
});
const emit = defineEmits(["update:contactName", "update:phone"]);

const userName = ref(props.contactName);
const userPhone = ref(props.phone);

const changeName = (e) => {
  emit("update:contactName", e.target.value);
};
const changePhone = (e) => {
  emit("update:phone", e.target.value);
};
</script>